<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>插件管理</title>
    <style>
        .relative {
            position: relative;
            min-height: 100px;
        }
    </style>
</head>
<body>
<cms-layout layout="admin/layout/master">
    <div id="app">
        <div class="bg-white rounded-lg shadow">
            <div class="p-4 border-b border-gray-200">
                <h2 class="text-xl font-semibold">插件市场</h2>
            </div>
            <div class="p-4">
                <div class="relative">
                    <el-table :data="marketPlugins" border v-loading="marketLoading" element-loading-text="加载中..."
                              element-loading-spinner="el-icon-loading">
                        <el-table-column label="Logo" width="80">
                            <template slot-scope="scope">
                                <el-image
                                        style="width: 40px; height: 40px"
                                        :src="scope.row.logo || '/static/images/plugin-default.png'"
                                        fit="contain">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="插件名称" width="180"></el-table-column>
                        <el-table-column prop="version" label="版本" width="100"></el-table-column>
                        <el-table-column prop="author" label="作者" width="120"></el-table-column>
                        <el-table-column prop="type" label="类型" width="100"></el-table-column>
                        <el-table-column prop="description" label="描述"></el-table-column>
                        <el-table-column label="操作" width="120">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="primary"
                                        @click="handleInstall(scope.row)">安装
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <!-- 分页组件 -->
                <div class="flex justify-center mt-4">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pagination.page"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="pagination.limit"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pagination.total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</cms-layout>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                marketPlugins: [],
                currentPlugin: null,
                pagination: {
                    page: 1,
                    limit: 10,
                    total: 0
                },

                marketLoading: false,
            }
        },
        created() {
            this.loadMarketPlugins()
        },
        methods: {

            loadMarketPlugins() {
                this.marketLoading = true
                const {page, limit} = this.pagination
                axios.get('/admin/plugin/market', {
                    params: {page, limit}
                }).then(response => {
                    if (response.data.code === 0) {
                        this.marketPlugins = response.data.data
                        this.pagination.total = response.data.count
                    }
                }).finally(() => {
                    this.marketLoading = false
                })
            },
            handleInstall(plugin) {
                this.$confirm('确认安装该插件？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.marketLoading = true
                    axios.post(`/admin/plugin/install/${plugin.pluginId}`).then(response => {
                        if (response.data.code === 0) {
                            this.$message.success('安装成功')
                            this.loadInstalledPlugins()
                            this.loadMarketPlugins()
                        } else {
                            this.$message.error(response.data.msg)
                        }
                    }).finally(() => {
                        this.marketLoading = false
                    })
                })
            },
            handleUninstall(plugin) {
                this.$confirm('确认卸载该插件？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.installedLoading = true
                    axios.post(`/admin/plugin/uninstall/${plugin.pluginId}`).then(response => {
                        if (response.data.code === 0) {
                            this.$message.success('卸载成功')
                            this.loadInstalledPlugins()
                            this.loadMarketPlugins()
                        } else {
                            this.$message.error(response.data.msg)
                        }
                    }).finally(() => {
                        this.installedLoading = false
                    })
                })
            },

            handleSizeChange(val) {
                this.pagination.limit = val
                this.pagination.page = 1
                this.loadMarketPlugins()
            },
            handleCurrentChange(val) {
                this.pagination.page = val
                this.loadMarketPlugins()
            },
        }
    })
</script>
</body>
</html> 